// web/src/app/learn/(dashboard)/_components/mobile-sidebar.tsx
import React from 'react';
import {Sheet, SheetContent, SheetTrigger} from "@/components/ui/sheet";
import {Menu} from "lucide-react";
import Sidebar from "@/app/learn/(dashboard)/_components/sidebar";

const MobileSidebar = () => {
    return (
        // 小屏幕点击弹出sidebar
        <Sheet>
            <SheetTrigger className={`md:hidden pr-4 hover:opacity-75 transition`}>
                <Menu/>
            </SheetTrigger>
            <SheetContent side={'left'} className={`p-0 bg-white`}>
                <Sidebar/>
            </SheetContent>
        </Sheet>
    );
};

export default MobileSidebar;